<template>
  <div class="subcard-detail" v-if="loaded">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          优惠券详情
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          编号：{{ couponBase.couponCode }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          优惠券名称：{{ couponBase.couponName }}
        </Col>
        <Col span="12" class="detail-table__col">
          类型：{{ getEnumsName(couponBase.couponType, couponTypeList) }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col" v-if="couponBase.couponType == 0 || couponBase.couponType == 2">
          面额：{{ processRules.promotionAmount }}{{couponBase.couponType == 2 ? '枚' : '元'}}
        </Col>
        <Col span="12" class="detail-table__col" v-if="couponBase.couponType == 1">
          折扣：{{ processRules.promotionAmount * 1000 / 100 }}折
        </Col>
        <Col span="12" class="detail-table__col">
          最低消费：{{ processRules.accumAmount }}元
        </Col>
      </Row>
      <Row v-if="couponBase.couponType == 1">
        <Col span="12" class="detail-table__col">
          最高消费：{{ couponBase.maxAmount }}元
        </Col>
        <Col span="12" class="detail-table__col">
          最高折扣金额：{{ processRules.discountLimit }}元（超过最高折扣金额，一律按此金额扣减）
        </Col>
      </Row>
       <Row>
        <Col :span="couponBase.expirationType == 0 ? '12':'24'" class="detail-table__col">
          有效期：{{ getEnumsName(couponBase.expirationType, timeTypes) }}
        </Col>
        <Col span="12" class="detail-table__col" v-if="couponBase.expirationType == 0">
          时长：{{ couponBase.dayNum }}天
        </Col>
      </Row>
      <Row v-if="couponBase.expirationType == 1">
        <Col span="12" class="detail-table__col">
          起始时间：{{ (couponBase.startTime.split(' ')[0] || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          到期时间：{{ (couponBase.endTime.split(' ')[0] || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          可用渠道：{{ extraData.channel | getChannelsName }}
        </Col>
        <Col span="12" class="detail-table__col">
          适用产品：{{ extraData.itemId | getCategorysName }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          获取类型：{{ getEnumsName(couponBase.originType, originTypeList) }}
        </Col>
        <Col span="12" class="detail-table__col">
          状态：{{ getEnumsName(couponBase.status, couponStatusList) }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建时间：{{ (couponBase.createTime || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑时间：{{ (couponBase.updateTime || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建人：{{ couponBase.creatorName }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑人：{{ couponBase.modifierName }}
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <table>
            <tr>
              <td width="72" valign="top">优惠券说明：</td>
              <td style="word-break:break-all;">{{ couponBase.remark }}</td>
            </tr>
          </table>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <table>
            <tr>
              <td width="72" valign="top">优惠券图片：</td>
              <td><img :src="couponBase.iconPath" width="150"></td>
            </tr>
          </table>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCoupon } from '@/api/market/coupon.js'
import enumsMixin from '../enums.js'
let that
export default {
  name: 'market_coupon_detail',
  mixins: [enumsMixin],
  data () {
    return {
      loaded: false,
      couponBase: {},
      extraData: {},
      processRules: {}
    }
  },
  beforeCreate: function () {
    that = this
  },
  filters: {
    getChannelsName (value) {
      if (value) {
        return value.map((value) => {
          const result = that.channelList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    },
    getCategorysName (value) {
      if (value) {
        return value.map((value) => {
          const result = that.categoryList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join('/')
      }
      return ''
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  created () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      getCoupon({
        merchantId: this.merchantId,
        couponId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.couponBase = result.data.couponBase
          this.processRules = result.data.rules[0].processRules[0]
          this.extraData = result.data.extraData
          this.loaded = true
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.subcard-detail {
  padding: 40px 80px
}
</style>
